<template>
  <model
    :title="titleList[model]"
    :visible="visible"
    @close="handelColse"
    @submit="submit"
  >
    <div slot="content">
      <a-form >
        <a-row >
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">部门名称：</div>
              <a-input class="form_input" :value="form.name" :default-value="form.name" v-model="form.name" placeholder="请输入部门名称" />
            </div>
          </a-col>
          <a-col :span="12">
            <div class="form_item">
              <div class="form_title">部门状态：</div>
              <a-switch v-model="form.status" :value="form.status"></a-switch>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="form_item">
              <div class="form_title">部门备注：</div>
              <a-input
                class="form_textarea"
                v-model="form.describe"
                :default-value="form.describe"
                :value="form.describe"
                type="textarea"
                placeholder="请输入名称" />
            </div>
          </a-col>
        </a-row>

      </a-form>
    </div>
  </model>
</template>

<script>
import { addDepartment, settingDepartment } from '@/api/department'
import { Model } from '@/components'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Number,
      default: () => 0
    },
    formData: {
      type: [String, Object],
      default: () => {}
    }
  },
  components: {
    Model
  },
  data () {
    return {
      titleList: ['新建', '编辑'],
      form: {
        id: 0,
        name: '',
        describe: '',
        status: true
      }
    }
  },
  methods: {
    setData (val) {
      this.form.id = val.id
      this.form.name = val.name
      this.form.describe = val.describe
      if (val.status === 0) {
        this.form.status = true
      } else {
        this.form.status = false
      }
    },
    handelColse () {
      this.form.id = 0
      this.form.name = ''
      this.form.describe = ''
      this.form.status = true
      this.$emit('cancel')
    },
    submit () {
      const status = this.form.status ? 0 : 1
      if (this.model === 0) {
        addDepartment({
          name: this.form.name,
          describe: this.form.describe,
          status: status
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.handelColse()
          } else {
            this.$message.error('添加失败')
          }
        })
      } else {
        settingDepartment({
          id: this.form.id,
          name: this.form.name,
          describe: this.form.describe,
          status: status
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('修改成功')
            this.handelColse()
          } else {
            this.$message.error('修改失败')
          }
        })
      }
    }

  }
}
</script>
<style lang='less' scoped>

.form_item{
  display: flex;
  justify-content: left;
  align-items: center;
  min-height: 70px;
  .form_title{
    width: 100px;
  }
  .form_input{
    width: 60%;
  }
  .form_textarea{
    width: 80%;
    height: 60px;
    margin: 20px 0;
  }
}

/deep/.ant-select-selection-selected-value{
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
}

</style>
